<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情 - 贵州四季康养文旅</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tdesign-icons-vue-next/dist/index.min.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f0f2f5;
            color: #333;
            overflow-x: hidden;
        }
        .navbar {
            background-color: white;
            position: sticky;
            top: 0;
            z-index: 100;
            border-bottom: 1px solid #f0f0f0;
        }
        .info-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: 12px;
        }
        .status-tag {
            display: inline-block;
            padding: 2px 8px;
            font-size: 12px;
            border-radius: 4px;
            color: white;
        }
        .status-success {
            background-color: #52c41a;
        }
        .status-waiting {
            background-color: #faad14;
        }
        .divider {
            height: 1px;
            background-color: #f0f0f0;
            margin: 12px 0;
        }
        .price-label {
            color: #999;
        }
        .price-value {
            color: #333;
            text-align: right;
        }
        .total-price {
            color: #ff4d4f;
            font-weight: bold;
            font-size: 18px;
            text-align: right;
        }
        .bottom-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            padding: 12px 16px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            display: flex;
            justify-content: flex-end;
            z-index: 100;
        }
    </style>
</head>
<body>
    <div class="pb-24"> <!-- 底部按钮栏的空间 -->
        <!-- 顶部导航栏 -->
        <div class="navbar px-4 py-3">
            <div class="flex items-center">
                <button class="w-8 h-8 flex items-center justify-center mr-2">
                    <i class="t-icon t-icon-chevron-left text-xl"></i>
                </button>
                <h1 class="text-lg font-bold flex-1 text-center">订单详情</h1>
                <div class="w-8"></div> <!-- 占位，保持标题居中 -->
            </div>
        </div>

        <!-- 订单状态 -->
        <div class="p-4 bg-blue-600 text-white">
            <div class="flex items-center">
                <i class="t-icon t-icon-check-circle-filled text-2xl mr-3"></i>
                <div>
                    <h2 class="text-lg font-medium mb-1">支付成功</h2>
                    <p class="text-sm opacity-80">感谢您的购买，祝您旅途愉快！</p>
                </div>
            </div>
        </div>

        <!-- 主要内容区 -->
        <div class="p-4">
            <!-- 订单信息 -->
            <div class="info-card">
                <div class="p-4">
                    <h3 class="font-bold mb-3">订单信息</h3>
                    
                    <div class="flex justify-between mb-2">
                        <span class="text-gray-500">订单编号</span>
                        <span>GZ202305271358001</span>
                    </div>
                    
                    <div class="flex justify-between mb-2">
                        <span class="text-gray-500">下单时间</span>
                        <span>2023-05-27 13:58:24</span>
                    </div>
                    
                    <div class="flex justify-between mb-2">
                        <span class="text-gray-500">支付方式</span>
                        <span>微信支付</span>
                    </div>
                    
                    <div class="flex justify-between">
                        <span class="text-gray-500">订单状态</span>
                        <span class="status-tag status-success">已支付</span>
                    </div>
                </div>
            </div>
            
            <!-- 商品信息 -->
            <div class="info-card">
                <div class="p-4">
                    <h3 class="font-bold mb-3">商品信息</h3>
                    
                    <div class="flex mb-4">
                        <div class="w-20 h-20 bg-gray-100 rounded-lg overflow-hidden mr-3">
                            <img src="https://images.unsplash.com/photo-1529822438134-3adce6a81a09" alt="荔波小七孔" class="w-full h-full object-cover">
                        </div>
                        <div class="flex-1">
                            <h4 class="font-medium">荔波小七孔景区门票</h4>
                            <p class="text-sm text-gray-500 mt-1">电子票 | 随时入园</p>
                            <div class="flex justify-between items-center mt-2">
                                <span class="text-blue-600">¥138.00</span>
                                <span class="text-gray-500">x2</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="divider"></div>
                    
                    <div class="flex mb-2">
                        <span class="text-gray-500">游玩日期</span>
                        <span class="ml-auto">2023-06-01</span>
                    </div>
                    
                    <div class="flex">
                        <span class="text-gray-500">入园时间</span>
                        <span class="ml-auto">09:00-17:00（最晚入园16:00）</span>
                    </div>
                </div>
            </div>
            
            <!-- 出行人信息 -->
            <div class="info-card">
                <div class="p-4">
                    <h3 class="font-bold mb-3">出行人信息</h3>
                    
                    <div class="bg-gray-50 p-3 rounded-lg mb-3">
                        <div class="flex justify-between">
                            <div>
                                <span class="font-medium">张小花</span>
                                <span class="ml-3 text-gray-500">成人票</span>
                            </div>
                            <span class="text-gray-500">1382****5678</span>
                        </div>
                        <div class="mt-2 text-sm text-gray-500">
                            身份证：3301********1234
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 p-3 rounded-lg">
                        <div class="flex justify-between">
                            <div>
                                <span class="font-medium">李大壮</span>
                                <span class="ml-3 text-gray-500">成人票</span>
                            </div>
                            <span class="text-gray-500">1375****1234</span>
                        </div>
                        <div class="mt-2 text-sm text-gray-500">
                            身份证：4401********5678
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 费用信息 -->
            <div class="info-card">
                <div class="p-4">
                    <h3 class="font-bold mb-3">费用信息</h3>
                    
                    <div class="flex justify-between mb-2">
                        <span class="price-label">商品金额</span>
                        <span class="price-value">¥276.00</span>
                    </div>
                    
                    <div class="flex justify-between mb-2">
                        <span class="price-label">优惠券</span>
                        <span class="price-value">-¥20.00</span>
                    </div>
                    
                    <div class="flex justify-between mb-2">
                        <span class="price-label">积分抵扣</span>
                        <span class="price-value">-¥10.00</span>
                    </div>
                    
                    <div class="divider"></div>
                    
                    <div class="flex justify-between">
                        <span class="font-medium">实付金额</span>
                        <span class="total-price">¥246.00</span>
                    </div>
                </div>
            </div>
            
            <!-- 预订须知 -->
            <div class="info-card">
                <div class="p-4">
                    <h3 class="font-bold mb-3">预订须知</h3>
                    
                    <div class="text-sm text-gray-600 leading-relaxed">
                        <p class="mb-2"><span class="font-medium text-gray-700">入园方式：</span>凭订单确认短信中的电子票二维码直接入园</p>
                        <p class="mb-2"><span class="font-medium text-gray-700">退改规则：</span>游玩日期前一天12:00前可申请退款，逾期不可退改</p>
                        <p><span class="font-medium text-gray-700">其他说明：</span>门票当天有效，出园后再次入园需重新购票</p>
                    </div>
                </div>
            </div>
            
            <!-- 联系客服 -->
            <div class="info-card">
                <div class="p-4 flex items-center justify-between">
                    <div class="flex items-center">
                        <i class="t-icon t-icon-service text-blue-600 text-xl mr-3"></i>
                        <span>联系客服</span>
                    </div>
                    <i class="t-icon t-icon-chevron-right text-gray-400"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部按钮栏 -->
    <div class="bottom-bar">
        <button class="px-4 py-2 border border-gray-300 rounded-full mr-3 text-sm">申请退款</button>
        <button class="px-4 py-2 bg-blue-600 text-white rounded-full text-sm">查看电子票</button>
    </div>
</body>
</html> 